<!DOCTYPE html>

<html>
	<head lang="en">
		<meta charset="UTF-8" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			table {
				border-collapse: collapse;
				border-spacing: 0;
				border: 1px solid #c0c0c0;
				width: 500px;
				margin: 100px auto;
				text-align: center;
			}

			th {
				background-color: #09c;
				font: bold 16px "微软雅黑";
				color: #fff;
				height: 24px;
			}

			td {
				border: 1px solid #d0d0d0;
				color: #404060;
				padding: 10px;
			}

			.allCheck {
				width: 80px;
			}
		</style>
	</head>

	<body>
		<table>
			<tr>
				<th class="allCheck">
					<input type="checkbox" name="" id="checkAll" />
					<span class="all">全选</span>
				</th>
				<th>商品</th>
				<th>商家</th>
				<th>价格</th>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="check" class="ck" />
				</td>
				<td>小米手机</td>
				<td>小米</td>
				<td>￥1999</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="check" class="ck" />
				</td>
				<td>小米净水器</td>
				<td>小米</td>
				<td>￥4999</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="check" class="ck" />
				</td>
				<td>小米电视</td>
				<td>小米</td>
				<td>￥5999</td>
			</tr>
		</table>
		<script>
			const checkAll = document.querySelector("#checkAll");
			const inputLists = document.querySelectorAll("input.ck");
			// 全选
			checkAll.addEventListener("click", () => {
				inputLists.forEach((e) => {
					e.checked = checkAll.checked;
				});
			});

			// 当商品都被选中的时候，全选按钮也被选中
			inputLists.forEach((e) => {
				e.addEventListener("click", () => {
					let count =
						document.querySelectorAll("input:checked.ck").length;
					checkAll.checked = count === inputLists.length;
				});
			});
		</script>
	</body>
</html>
